<template>
  <div class="address">
    <van-nav-bar
      title="标题"
      left-text="返回"
      right-text="新增地址"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <div class="more" v-for="(item, index) in list" :key="index">
      <div class="left">
        <h4>{{ item.address }}</h4>
        <h5>{{ item.name }}</h5>
        <span>{{ item.phone }}</span>
      </div>
      <van-icon name="edit" @click="onEdit(index)" />
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { address_list } from "../api";
export default {
  data() {
    return {
      chosenAddressId: "1",
      list: [],
    };
  },
  mounted() {
    var userId = JSON.parse(localStorage.getItem("userinfo")).id;
    address_list({ userid: userId }).then((res) => {
      this.list = res.data.list;
      //   console.log(res.data.list[0]);
      console.log(this.list[0]);
    });
  },
  methods: {
    onClickLeft() {
      this.$router.push("/footer/mine");
    },
    onClickRight() {
      this.$router.push("/newadd");
    },
    onAdd() {
      this.$router.push("/newadd");
    },
    onEdit(index) {
      this.$store.commit("SaveIndex", this.list[index]);
      this.$router.push("/modify");

      //   console.log(index);
      //   console.log(this.list[index]);
    },
  },
};
</script>

<style scoped>
.more {
  width: 90%;
  height: 100px;
  margin: auto;
  position: relative;
}
h5 {
  display: inline-block;
  color: #e0e0e0;
}
span {
  display: inline-block;
  font-size: 14px;
  color: #e0e0e0;
  margin-left: 20px;
}
.van-icon {
  position: absolute;
  right: 50px;
  top: 20px;
}
</style>